Jaxer 서버를 가지고 노느라 정신없습니다.
스크린케스트도 따라해 보고 셈플코드도 열어보고 하면서, 과연 어떠한 방식으로 서버-사이드 자바스크립트 함수가 클라이언트-사이드의 자바스크립트 함수를 호출할 수 있는지를 이해하게 되었습니다. 아래의 두 코드를 잘 비교해 보세요. 흥미롭습니다.
서버단 코드
<html>
<head>
<title>Index</title>
<link type="text/css" rel="stylesheet" href="http://firejune.com/css/index.css" />
<!-- 서버와 클라이언트 모두 작동하는 자바스크립트 코드 -->
<script type="text/javascript" runat="both">
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body onserverload="initContents()" onload="getContents()">
<!-- 컨텐츠가 삽입될 영역 -->
<div id="contents"></div>
<!-- 서버에서만 작동하는 자바스크립트 코드 -->
<script type="text/javascript" runat="server">
function initContents() {
$('contents').innerHTML = "내용물";
}
</script>
<!-- 클라이언트에서만 작동하는 자바스크립트 코드 -->
<script type="text/javascript">
function getContents() {
alert($('contents').innerHTML);
}
</script>
</body>
</html>
파싱된 클라이언트단 코드
<html>
<head>
<title>Index</title>
<link type="text/css" rel="stylesheet" href="http://firejune.com/css/index.css" />
<!-- 서버와 클라이언트 모두 작동하는 자바스크립트 코드 -->
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body onload="getContents()">
<!-- 컨텐츠가 삽입될 영역 -->
<div id="contents">내용물</div>
<!-- 서버에서만 작동하는 자바스크립트 코드 -->
<!-- 클라이언트에서만 작동하는 자바스크립트 코드 -->
<script type="text/javascript">
function getContents() {
alert($('contents').innerHTML);
}
</script>
</body>
</html>
함수명 '$'는 서버와 클라이언트가 공유하여 사용하고 있고 "runat" 속성을 가진 script 태그는 클라이언트에 넘어와서 자취를 감춥니다. body태그에 삽입된 "onserverload" 속성또한 마찬가지이죠. 아~ 행복해 지려고 해요.
출처 : firejune | http://aptana.com/jaxer
